<main id="content-container" class="container" role="main">
  <div class="row" style="margin-top:20px;">

    <div class="col-md-10 col-md-offset-1 well bg-dark" style="min-height:600px;">

      <div class="jumbotron">
        <h1>Match No <%= @match.id %></h1>
        <p>This is the match show page.</p>
      </div>

      <div class="col-md-12" style="margin-top:30px; margin-bottom:30px;">

        <div class="col-md-10 col-md-offset-1">
          <div>
            <p class="header">Fightere Fight No <%= @match.id %></p>
            <p class="header">Ladder: <%= @match.ladder.city %></p>
            <p class="header">Round: <%=  %></p>
            <p class="header">Start: <%= @match.ladder.begin %></p>
            <p class="header">End: <%= @match.ladder.end %></p>
          </div>


          <% for @fighter in @match.fighters %>

          <div class="media" style="color: white;">

            <div class="pull-left">
              <%= link_to image_tag(fighter_avatar_url(@fighter), :class=>"media-object img-thumbnail img-mid"), fighter_path(@fighter) %>
            </div>
          
            <div class="media-body">
              <h3 class="media-heading red"><strong><%= @fighter.nickname.upcase %></strong></h3>
              <h2 class="media-heading"><%= @fighter.name.upcase %></h2>
              <p>Joined: <%= @fighter.created_at.strftime('%Y-%m-%d') %></p>
              <p>Age: <%= age(@fighter.born)%></p>
              <p>Height: <%= @fighter.height %></p>
              <p>Weight: <%= @fighter.weight %> lbs</p>
              <p>Resides: <%= @fighter.city%></p>
              <p>Ladder: N/A</p>
              <p>Current Rank: 8</p>
              <p>Highest Rank: 3</p>
              <p><strong>13-2-2 (W-L-D)</strong></p>

            </div>
          </div>
          <% end %>


          <div>

            <p class="header">Match Result</p>
            <p class="header">Held on: <%= @match.held_on %></p>
            <p class="header">Status: <%= @match.status %></p>
            <p class="header">Result: <%= @match.result %></p>
          </div>
        </div>
      </div>

      <div class="col-md-9 col-md-offset-1" style="margin-top:30px; margin-bottom:30px;">


          <div class="media" style="color: white;">


          </div>

      </div>
    </div>

  </div>
</main>

